<template>
    <div class="menuItemContainer " v-if="data.children && data.children.length > 0" style="padding-left:10px">
        <li :class="index>=0?'fontColor menuItem':data.url!=null?'menuThree menuItem':'menuItem'" @click="openMenu(data)">
            {{data.name}}
            <el-tooltip :content="data.collect?'取消收藏夹':'添加收藏夹'" placement="bottom" effect="light">
                <i v-if="data.url!=null" :class="data.collect?'iconfont icon-ditu-xing':'iconfont icon-xingzhuang-xingxing'" @click.stop="addCollect(data)"></i>
            </el-tooltip>
        </li> 
        <menu-item :data="item" :key="index"  v-for="(item,index) in data.children" ></menu-item>
    </div>
    <div v-else style="padding-left:10px">
        <li :class="index>=0?'fontColor menuItem':data.url!=null?'menuThree menuItem':'menuItem'" @click="openMenu(data)">
            {{data.name}}
            <el-tooltip :content="data.collect?'取消收藏夹':'添加收藏夹'" placement="bottom" effect="light">
                <i v-if="data.url!=null" :class="data.collect?'iconfont icon-ditu-xing':'iconfont icon-xingzhuang-xingxing'" @click.stop="addCollect(data)"></i>
            </el-tooltip>
        </li>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapMutations,mapActions } = createNamespacedHelpers('homeModule');
const { mapMutations: mapTagMutations } = createNamespacedHelpers('tagModule');
export default {
    name: 'MenuItem',
    props: ['data','index'],
    data () {
        return {

        };
    },
    methods: {
        ...mapTagMutations([
            'addTag'
        ]),
        ...mapMutations([
            'updateMenu',
        ]),
        ...mapActions([
            'updateCollectAsync'
        ]),
        // 打开菜单
        openMenu (menu) {
            if (!menu.url || menu.url === '') {
                return;
            }
            // 打开方式
            if (menu.isNew) {
                window.open(menu.url);
            } else if (menu.isBuiltin){
                // 内置页面
                this.addTag(menu);
            } else {
                this.addTag(menu);
            }
            this.updateMenu();
        },
        // 更新收藏夹
        addCollect(data){
            this.updateCollectAsync(data);
        }
    },
};
</script>

<style lang="scss" scoped>
.menuItemContainer{
    .menuThree{
        cursor: pointer;
    }
    .menuItem{
        padding: 0 6px;
        line-height: 28px;
        display: inline-block;
        width: 160px;
        position: relative;
        padding-right: 18px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        i{
            position: absolute;
            right: 4px;
            visibility: hidden;
        }
    }
    .menuItem:hover{
        i{
            visibility: visible;
        }
    }
}
</style>
